<template>
  <input type="text" :value="showValue" @input="input" :placeholder="placeholder" :id="`form_${field.fieldName}`" v-if="seo" />
  <div class="form-text" v-else>
    <input type="text" :value="showValue" @input="input" :placeholder="placeholder" :id="`form_${field.fieldName}`" disabled />
  </div>
</template>

<script>
import FormMixin from '@src/component/form/mixin/form';
import FormRelationMixin from './FormRelationMixin.js'
import { fmt_form_cascader } from '@src/filter/form'
import { useFormTimezone, formatDate, isNumber } from 'pub-bbx-utils'

const { isSystemTimeField, isCustomTimeField } = useFormTimezone()
export default {
  name: 'form-relation',
  mixins: [FormMixin, FormRelationMixin],
  props: {
    value: {
      // 工单产品关联字段传进来是数组
      type: [Array, String, Array],
      default: ''
    }
  },
  computed: {
    showValue() {
      const {isMulti, displayMode, formType, module} = this.field.setting || {}
      if (this.field.tableName !== 'register' && formType === 'cascader') {
        if (module === 'product' && (this.field.tableName === 'task' || this.field.tableName === 'event')) {
          return (this.value || []).map(item => fmt_form_cascader(item, isMulti)).join('、')
        }
        return fmt_form_cascader(this.value, isMulti, displayMode)
      }
      if(isSystemTimeField({...this.field.setting, isSystem: 1}) || isCustomTimeField({...this.field.setting, isSystem: 0})){
        // TODO 这里是时间戳的先格式化一下 如果是时间字段
        if(isNumber(this.value)) {
          return formatDate(this.value)
        }
      }
      return this.value
    }
  },
}
</script>

<style lang="scss" scoped>
.form-text{
  width: 100%;

  input{
    width: 100%;
    // background: #eee;
  }
}
</style>

